<template>
  <div class="tabs">
    <p
      :class="{ active: index == ind }"
      v-for="(item, index) in props.tabs"
      :key="index"
      @click="changeInd(index)"
    >
      {{ item }}
    </p>
  </div>
</template>

<script setup>
let props = defineProps(["tabs", "ind"]);
let emit = defineEmits(["changeIndex"]);
const changeInd = (index) => {
  console.log(index);
  emit("changeIndex", index);
};
</script>

<style scoped>
.tabs {
  display: flex;
}
.tabs > P {
  padding: 0 10px;
  box-sizing: border-box;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #ccc;
}
.tabs > .active {
  color: aqua;
  border: 1px solid aqua;
}
</style>